<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script src="js/boot.js"></script>
    <link rel="stylesheet" href="plugins/layuiadmin/style/admin.css" media="all">
    <script>
        /^http(s*):\/\//.test(location.href) || alert('请先部署到 localhost 下再访问');
    </script>
</head>

<body class="layui-layout-body">

    <div id="LAY_app">
        <div class="layui-layout layui-layout-admin">
            <div class="layui-header">
                <!-- 头部区域 -->
                <ul class="layui-nav layui-layout-left">
                    <li class="layui-nav-item layadmin-flexible" lay-unselect>
                        <a href="javascript:;" layadmin-event="flexible" title="侧边伸缩">
                            <i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i>
                        </a>
                    </li>
                    <li class="layui-nav-item" lay-unselect>
                        <a href="javascript:;" layadmin-event="refresh" title="刷新">
                            <i class="layui-icon layui-icon-refresh-3"></i>
                        </a>
                    </li>
                </ul>
                <ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">

                    <li class="layui-nav-item layui-hide-xs" lay-unselect>
                        <a href="javascript:;" layadmin-event="fullscreen">
                            <i class="layui-icon layui-icon-screen-full"></i>
                        </a>
                    </li>
                    <li class="layui-nav-item" lay-unselect style="margin-right:30px">
                        <a href="javascript:;">
                            <cite id="userName"></cite>
                        </a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a id="modifyUserInfo" style="text-align: center;cursor: pointer;">基本资料</a>
                            </dd>
                            <dd>
                                <a id="modifyPassword" style="text-align: center;cursor: pointer;">修改密码</a>
                            </dd>
                            <hr>
                            <dd style="text-align: center;cursor: pointer;">
                                <a id="logOut">退出</a>
                            </dd>
                        </dl>
                    </li>
                </ul>
            </div>

            <!-- 侧边菜单 -->
            <div class="layui-side layui-side-menu">
                <div class="layui-side-scroll">
                    <div class="layui-logo">
                        <span id="systemName"></span>
                    </div>
                    <ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu" lay-filter="layadmin-system-side-menu">

                    </ul>
                </div>
            </div>

            <!-- 页面标签 -->
            <div class="layadmin-pagetabs" id="LAY_app_tabs">
                <div class="layui-icon layadmin-tabs-control layui-icon-prev" layadmin-event="leftPage"></div>
                <div class="layui-icon layadmin-tabs-control layui-icon-next" layadmin-event="rightPage"></div>
                <div class="layui-icon layadmin-tabs-control layui-icon-down">
                    <ul class="layui-nav layadmin-tabs-select" lay-filter="layadmin-pagetabs-nav">
                        <li class="layui-nav-item" lay-unselect>
                            <a href="javascript:;"></a>
                            <dl class="layui-nav-child layui-anim-fadein">
                                <dd layadmin-event="closeThisTabs">
                                    <a href="javascript:;">关闭当前标签页</a>
                                </dd>
                                <dd layadmin-event="closeOtherTabs">
                                    <a href="javascript:;">关闭其它标签页</a>
                                </dd>
                                <dd layadmin-event="closeAllTabs">
                                    <a href="javascript:;">关闭全部标签页</a>
                                </dd>
                            </dl>
                        </li>
                    </ul>
                </div>
                <div class="layui-tab" lay-unauto lay-allowClose="true" lay-filter="layadmin-layout-tabs">
                    <ul class="layui-tab-title" id="LAY_app_tabsheader">
                        <li lay-id="console.html" lay-attr="console.html" class="layui-this">
                            <i class="layui-icon layui-icon-home"></i>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- 主体内容 -->
            <div class="layui-body" id="LAY_app_body">
                <div class="layadmin-tabsbody-item layui-show">
                    <iframe src="console.html" frameborder="0" class="layadmin-iframe"></iframe>
                </div>
            </div>

            <!-- 辅助元素，一般用于移动设备下遮罩 -->
            <div class="layadmin-body-shade" layadmin-event="shade"></div>
        </div>
    </div>

    <script>
        layui.config({
            base: 'plugins/layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use('index');
    </script>
    <script>
        $(function() {
            BindProjectConfig();
            BindMenu();
            BindPageInfo();
            BindPageEvent();
            StartWebSocket();
        })

        function BindMenu() {
            var param = {

            }
            HttpPost(JSON.stringify(param), 'system/setting/menu/getMenu', function(result) {
                if (result.code == 0) {
                    var data = result.data.obj;
                    var text = "";

                    data.forEach(element1 => {
                        text += "       <li data-name='" + element1.id + "' class=\"layui-nav-item\">";
                        text += "            <a href=\"javascript:;\" lay-tips=\"系统管理\" lay-direction=\"2\">";
                        text += "                  <i class='layui-icon " + element1.attributes.icon + "'></i>";
                        if (element1.children && element1.children.length != 0) {
                            text += "                   <cite>" + element1.name + "</cite>";
                        } else {
                            if (element1.attributes.url != "") {
                                if (element1.attributes.openmodel == 10) {
                                    text += "                   <cite lay-href='" + element1.attributes.url + "'>" + element1.name + "</cite>";
                                } else {
                                    text += "                   <cite tag='windowopen' url='" + element1.attributes.url + "'>" + element1.name + "</cite>";
                                }
                            } else {
                                text += "                   <cite>" + element1.name + "</cite>";
                            }
                        }
                        text += "             </a>";
                        if (element1.children && element1.children.length > 0) {
                            text += "    <dl class=\"layui-nav-child\">";
                            element1.children.forEach(element2 => {
                                text += "       <dd>";
                                if (element2.children && element2.children.length != 0) {
                                    text += "            <a href=\"javascript:;\">" + element2.name + "</a>";
                                } else {
                                    if (element2.attributes.url != "") {
                                        if (element2.attributes.openmodel == 10) {
                                            text += "            <a  lay-href='" + element2.attributes.url + "'>" + element2.name + "</a>";
                                        } else {
                                            text += "            <a href=\"javascript:;\"  tag='windowopen' url='" + element2.attributes.url + "'>" + element2.name + "</a>";
                                        }

                                    } else {
                                        text += "            <a href=\"javascript:;\">" + element2.name + "</a>";
                                    }
                                }
                                if (element2.children && element2.children.length > 0) {
                                    text += "    <dl class=\"layui-nav-child\">";
                                    element2.children.forEach(element3 => {
                                        text += "     <dd>";
                                        if (element3.attributes.url != "") {
                                            if (element3.attributes.openmodel == 10) {
                                                text += "        <a lay-href='" + element3.attributes.url + "'>" + element3.name + "</a>";
                                            } else {
                                                text += "            <a href=\"javascript:;\" tag='windowopen' url='" + element3.attributes.url + "'>" + element3.name + "</a>";
                                            }

                                        } else {
                                            text += "            <a href=\"javascript:;\">" + element3.name + "</a>";
                                        }

                                        text += "    </dd>";
                                    });
                                    text += "    </dl>";
                                }
                                text += "    </dd>";
                            });
                            text += "    </dl>";
                        }
                        text += "       </li>";
                    });
                    $("#LAY-system-side-menu").html(text);
                    layui.element.render();
                    $("cite[tag='windowopen']").each(function() {
                        var url = $(this).attr("url");
                        $(this).click(function() {
                            window.open(url);
                        })
                    })
                    $("a[tag='windowopen']").each(function() {
                        var url = $(this).attr("url");
                        $(this).click(function() {
                            window.open(url);
                        })
                    })
                }
            })
        }

        function BindPageInfo() {
            var userTokenModel = GetTokenModel();
            $("#userName").text(userTokenModel.userName);
            var config = GetProjectConfig();
            $("#systemName").text(config.systemName);
        }

        function BindPageEvent() {
            $("#logOut").click(function() {
                OpenConfirm('退出系统？', function() {
                    var param = {
                        token: GetTokenID()
                    }
                    HttpPost(JSON.stringify(param), 'system/common/auth/userLogOut', function(result) {
                        if (result.code == 0) {
                            RemoeToken();
                            window.location.href = GetRootPath() + "login.html";
                        }
                    })
                })
            })

            $("#modifyUserInfo").click(function() {
                var userTokenModel = GetTokenModel();
                OpenDialog('基本信息', 'system/user/user_modify.html?row_id=' + userTokenModel.userID, 600, 400)
            })
            $("#modifyPassword").click(function() {
                var userTokenModel = GetTokenModel();
                OpenDialog('修改密码', 'system/user/user_modifypassword.html?row_id=' + userTokenModel.userID, 600, 400)
            })
        }
    </script>
    <script>
        var ws = null;
        var timeoutObj = null;

        function StartWebSocket() {
            ws = new WebSocket(GetApiPath().replace("http", "ws") + "/frame/socket/" + GetTokenID());
            ws.onopen = function() {
                //当WebSocket创建成功时，触发onopen事件
                console.log("open");
                ws.send("hello"); //将消息发送到服务端
                startHeartConnect();
            }
            ws.onmessage = function(e) {
                //当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
                console.log(e.data);
                var obj = JSON.parse(e.data);
                if (obj.data.socketType && obj.data.socketType == "Auth") {
                    if (obj.data.socketHandle == "TokenModelChange") {
                        RefreshTokenModel();
                        BindPageInfo();
                    }
                }
            }
            ws.onclose = function(e) {
                //当客户端收到服务端发送的关闭连接请求时，触发onclose事件
                console.log("close");
            }
            ws.onerror = function(e) {
                //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
                console.log(error);
            }
        }

        function startHeartConnect() {
            timeoutObj && clearInterval(timeoutObj);
            console.log("开启心跳")
            timeoutObj = setInterval(function() {
                heartConnectEvent();
            }, 30 * 1000)
        }

        function heartConnectEvent() {
            // 这里发送一个心跳，后端收到后，返回一个心跳消息，
            console.log(ws.readyState)
            if (ws && ws.readyState == 1) { // 如果连接正常
                ws.send('heartbeat');
                console.log("发送心跳")
            } else { // 否则重连
                reconnectSocket();
            }
        }

        function reconnectSocket() {
            console.log("开启socket重连")
            timeoutObj && clearTimeout(timeoutObj);
            startHeartConnect();
        }
    </script>
</body>

</html>